var WFModal = new Class({
    Implements: [Options, Events],
    options: {
        id: 'WFModal',
        className: '',
        parentEl: document.body,
        title: '',
        content: '',
        width: 'auto',
        height: 'auto',
        showTitle: true,
        showRefresh: false,
        onlyOverlay: false,   //not show modalElement
        maximize: false,
        callBack: function(){},
        callBackBeforeClose: function(){},
        callBackAfterResize: function(){},
        eventPosition: null
    },
    modalElement: {},
    modalOverlay: {},
    callbackptr: null,
    callbackBeforeCloseptr: null,
    callbackAfterResizeptr: null,
    initialize: function(options, callerthis)
	{
        this.objectModal = this;
        this.setOptions(options);
		this.renderModal();
        this.bindResize = this.onResize.bind(this);
        window.addEvent('resize', this.bindResize);
        if(callerthis){
            this.options.callerthis = callerthis;
        }
        this.objectModal.addEvent('onClose',this.close.bind(this));
        var runClose = this.closeEvent.bind(this);
        runClose();
		runClose = null;
        if(this.options.callerthis){
            this.callbackptr=this.options.callBack.bind(this.options.callerthis);
            this.callbackptr(this.objectModal);
            this.callbackBeforeCloseptr=this.options.callBackBeforeClose.bind(this.options.callerthis);
            this.callbackAfterResizeptr=this.options.callBackAfterResize.bind(this.options.callerthis);
        }
        else{
            this.callbackptr=this.options.callBack;
            this.callbackptr();
            this.callbackBeforeCloseptr=this.options.callBackBeforeClose;
            this.callbackAfterResizeptr=this.options.callBackAfterResize;
        }
        this.onResize();
        return this.objectModal;
    },
    close: function()
	{
        if($chk(this.objectModal))
		{
            if($chk(this.callbackBeforeCloseptr)){
                this.callbackBeforeCloseptr(this.objectModal);
            }

        	if($chk(this.callbackptr))
			{
        		this.objectModal.removeEvent('onComplete',this.callbackptr);
        	}
        	this.objectModal.removeEvents('onClose');
        }
        if(this.options.callerthis && this.options.callerthis.settingsBox)
		{
    	  	this.options.callerthis.settingsBox.inject(this.options.callerthis.contentBox,'top');
    	  	this.options.callerthis.settingsBox.setStyle('display','none');
        }
        window.removeEvent('resize', this.bindResize);
        if (!this.options.onlyOverlay)
		{
            this.modalElement.destroy();
        }
        this.modalOverlay.destroy();
        $(document).removeEvent('keydown',this.modalKeyDown.bind(this));
		this.options.callBack = null;
        this.options.callBackBeforeClose = null;
        this.options.callBackAfterResize = null;
		this.options = null;
		this.modalElement = null;
		this.modalTable = null;
		this.modalOverlay = null;
		this.bindResize = null;
		this.callbackptr = null;
        this.callbackBeforeCloseptr = null;
        this.callbackAfterResizeptr = null;
    },
    modalKeyDown: function(event){
        if (event.key == 'esc') 
		{
            this.objectModal.fireEvent('onClose');
        }
    },
    closeEvent: function()
	{
        $(document).addEvent('keydown', this.modalKeyDown.bind(this));
    },
    onResize: function()
	{
		var docHight = document.getCoordinates().height;
		if(this.modalOverlay === null){
			return;
		}
        this.modalOverlay.set('styles',{'height': docHight});
		docHight = null;
        if (!this.options.onlyOverlay)
		{
            if(this.modalElement.getElement('.modalTable') === null)
			{
                return;
            }
            var iframeModaloffsetY = WF.util.iframeModaloffsetY();
            if (!$chk(iframeModaloffsetY)){
                iframeModaloffsetY = 0;
            }

            var maxHeight = 0;
            if(this.options.maximize){
                this.options.width = (document.getCoordinates().width-$$('.modalTable .ms')[0].getSize().x * 2)-20*2;//left:20px, right:20px
                if(this.options.width){
                    this.modalElement.getElement('.modalContent').setStyles({'width':this.options.width});
                }
                var height = document.getCoordinates().height- $$('.modalTable .tm')[0].getSize().y- $$('.modalTable .top')[0].getSize().y
                            - $$('.modalTable .border')[0].getSize().y - $$('.modalTable .bottom')[0].getSize().y - $$('.modalTable .bm')[0].getSize().y
                            -iframeModaloffsetY-20*2;//top:20px, bottom:10px
                var contentHeight = height-this.modalElement.getElement('.modalContent .bd').getSize().y-20;
                if(contentHeight > 0){
                    this.modalElement.getElement('.modalContent .hd').setStyle('height', contentHeight);
                    maxHeight = height;
                }
            }else{
                maxHeight = Math.floor(document.getCoordinates().height* wf_modalMaxHeight- $$('.modalTable .tm')[0].getSize().y- $$('.modalTable .top')[0].getSize().y
                           - $$('.modalTable .border')[0].getSize().y - $$('.modalTable .bottom')[0].getSize().y - $$('.modalTable .bm')[0].getSize().y-iframeModaloffsetY) - 40;
            }
            if(maxHeight > 0){
                this.modalElement.getElement('.modalContent').setStyle('max-height',maxHeight);
            }
			var windowSize_y = $(window).getSize().y;
			var moalTableSize_y = this.modalElement.getElement('.modalTable').getSize().y;
			var windowSize_x = $(window).getSize().x;
			var moalTableSize_x = this.modalElement.getElement('.modalTable').getSize().x;
			
            var top = (windowSize_y - moalTableSize_y) / 2 - wfc_modalOffsetY;
            top = (top <= 0) ? 0 : Math.floor(top);
            //for ZG iframe modal position issue
            if(this.options.eventPosition !== null){
                top = this.options.eventPosition;
            }
            var availMargin = Math.floor((windowSize_x - moalTableSize_x) / 2);
            if (availMargin > 0 && wfc_modalOffsetX !== 0)
			{
                var left = Math.min(availMargin, Math.abs(wfc_modalOffsetX));
                if (wfc_modalOffsetX > 0)
				{
                    left *= -1;
                }
                this.modalElement.set({'styles': {'left':left}});
            }
            
            this.modalElement.set({'styles': {'top':top}});

            if(this.options.maximize){
                if($chk(this.callbackAfterResizeptr)){
                    this.callbackAfterResizeptr(this.objectModal);
                }
            }
			top = null;
			left = null;
			windowSize_y = null;
			moalTableSize_y = null;
			windowSize_x = null;
			moalTableSize_x = null;
        }
    },
	renderModal: function(){
        if (!this.options.onlyOverlay){
            var HTML = [
                '<table class="modalTable">',
                '   <tr><td class="tl"></td><td class="tm"></td><td class="tr"></td></tr>',
                '   <tr><td class="ms"></td><td class="mm"><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="border"><div class="clearfix modalTitle"><h2>'+this.options.title+'</h2><a id="modal_close" class="close" href="#"></a><a id="modal_refresh" class="refresh hide" href="#"></a></div></div><div class="modalContent">'+this.options.content+'</div><div class="bottom clearfix"><div class="left"></div><div class="right"></div></div></td><td class="ms"></td></tr>',
                '   <tr><td class="bl"></td><td class="bm"></td><td class="br"></td></tr>',
                '</table>'
            ].join('');

            if(typeof(this.options.parentEl)=='string'){
                this.modalElement = new Element('div',{
                    'class': 'modal'
                }).inject($(this.options.parentEl),'bottom');
            }else if(typeof(this.options.parentEl)=='object'){
                this.modalElement = new Element('div',{
                    'class': 'modal'
                }).inject(this.options.parentEl,'bottom');
            }
            this.modalTable = new Element('div',{
                'id': this.options.id,
                'class': this.options.className,
                'html': HTML
            }).inject(this.modalElement,'bottom');
            if(this.options.showRefresh){
                $$('.modalTitle .refresh').set('styles',{'display':'block'});
            }
            if (!this.options.showTitle){
                $$('.modalTitle').set('styles',{'display':'none'});
            }
        }
        //create modal overlay
        this.modalOverlay = new Element('div',{
            'id': 'modal_overlay',
            'styles': {
                'height': document.getCoordinates().height
            }
        }).inject(this.options.parentEl);

        if (!this.options.onlyOverlay){
            this.contentEl = this.modalElement.getElement('.modalContent');
            var iframeModaloffsetY = WF.util.iframeModaloffsetY();
            if (!$chk(iframeModaloffsetY)){
                iframeModaloffsetY = 0;
            }

            var maxHeight = 0;
            if(this.options.maximize){
                this.options.width = (document.getCoordinates().width-$$('.modalTable .ms')[0].getSize().x * 2)-20*2;//left:20px, right:20px
                var height = document.getCoordinates().height- $$('.modalTable .tm')[0].getSize().y- $$('.modalTable .top')[0].getSize().y
                            - $$('.modalTable .border')[0].getSize().y - $$('.modalTable .bottom')[0].getSize().y - $$('.modalTable .bm')[0].getSize().y
                            -iframeModaloffsetY-20*2;//top:20px, bottom:10px
                var contentHeight = height-this.modalElement.getElement('.modalContent .bd').getSize().y-20;
                if(contentHeight > 0){
                    this.modalElement.getElement('.modalContent .hd').setStyle('height', contentHeight);
                    maxHeight = height;
                }
                this.modalElement.getElement('.modalContent').setStyles({'width':this.options.width});
            }else{
                maxHeight = Math.floor(document.getCoordinates().height* wf_modalMaxHeight- $$('.modalTable .tm')[0].getSize().y- $$('.modalTable .top')[0].getSize().y
                           - $$('.modalTable .border')[0].getSize().y - $$('.modalTable .bottom')[0].getSize().y - $$('.modalTable .bm')[0].getSize().y-iframeModaloffsetY);
                this.modalElement.getElement('.modalTable').setStyles({'width':this.options.width});
            }
            if(this.modalElement.getElement('.modalContent .hd')){
                this.modalElement.getElement('.modalContent .hd').setStyle('overflow-x','auto');
            }
            this.modalElement.getElement('.modalContent').setStyles({'position':'relative','overflow-x':'hidden','overflow-y':'auto','height':this.options.height, 'max-height':maxHeight});
            this.modalElement.getElement('.close').addEvent('click',function(e){
                e.preventDefault();
                this.objectModal.fireEvent('onClose');
            }.bind(this));
        }
	}
});
